<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
  <template #header>
    <div class="header">
      <span class="name">关键字</span>
      <el-input class="search" v-model="queryObj.keyword" ></el-input>
      <span class="name">状态</span>
      <el-select class="search" v-model="queryObj.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="searchName">搜索</el-button>
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon> 新增技巧</el-button>

    </div>
    <el-alert
    :title="`共 ${total} 条记录`"
    effect="dark"
    :closable="false"
    show-icon
    type="info">
  </el-alert>

  </template>
 <el-table :data="tableData" stripe style="width: 100%"  v-loading="loading"    highlight-current-row>
      <el-table-column prop="id" label="序号" width="100" ></el-table-column>
          <el-table-column prop="title" label="文章标题" width="150"   >
              <template #default="{ row }">
                <span>{{row.title}}</span>
               <a ref="#" v-show="row.videoURL" class="el-icon-film" style="color:blue" @click.prevent="goVideo"></a>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="username" label="录入人" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="createTime" label="创建时间"  header-align="center" align="center" width="300"></el-table-column>
           <el-table-column prop="state" label="状态" header-align="center" align="center" width="100">
            <template #default="{ row }">
               <span>{{row.state?'已启用':'已禁用'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" header-align="center" align="center">
            <template #default="{ row }">
              <div class="actions">
                <el-button  type="text"  @click="open('look',row.id)" >预览</el-button>
                <el-button  type="text" v-if="!row.state" @click="getNewState(row.id,row.state)" >启用</el-button>
                 <el-button  type="text" v-else  @click="getNewState(row.id,row.state)" >禁用</el-button>
                  <el-button  type="text"  @click="open('edit',row.id)" :disabled="row.state===1? true:false">修改</el-button>
                  <el-button type="text" :disabled="row.state===1? true:false || row.totals>0? true:false"  @click="del(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

     <div class="pagination">   <PageTool :total="total"
         :paginationPage="queryObj.page"
         :paginationPagesize="queryObj.pagesize"
         @pageChange="onPageChange"
         @pageSizeChange="onPageSizeChange"
        ></PageTool>
        </div>
</el-card>
<ArticlesPreview
 :dialogShowLook.sync='dialogShowLook'
 :pageTitle="pageTitle"
 :lookForm="lookForm"
></ArticlesPreview>
<ArticleAdd
 ref="editArticle"
 :dialogShow.sync="dialogShow"
 :pageTitle="pageTitle"
></ArticleAdd>
<div class="videoShowMe" v-if="videoShow">
  <video src=""></video>
  <i class="close el-icon-circle-close" @click="videoShow=false"></i>
</div>
  </div>
</template>

<script>
import ArticleAdd from '@/module-hmmm/components/articles-add'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
import { getNewDate } from '@/utils'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove, changeState, detail } from '@/api/hmmm/articles.js'
// import { detail } from '@/api/hmmm/subjects.js'
export default {
  components: {
    ArticlesPreview,
    PageTool,
    ArticleAdd
  },
  data () {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10,
        state: null,
        keyword: null
      },
      type: '',
      dialogShow: false,
      dialogShowLook: false,
      options: [{ value: 0, label: '禁用' }, { value: 1, label: '启用' }],
      lookForm: {
        title: '',
        createTime: '',
        username: '',
        visits: '',
        articleBody: ''
      },
      videoShow: false
    }
  },

  async created () {
    this.initData()
  },

  methods: {
    async initData () {
      this.loading = true
      const res = await list(this.queryObj)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.loading = false
      this.tableData.forEach(item => {
        item.createTime = getNewDate(item.createTime)
      })
    },

    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },
    async getNewState (id, state) {
      const obj = { id, state }
      if (state === 0) {
        obj.state = 1
      } else if (state === 1) {
        obj.state = 0
      }
      await changeState(obj)
      this.initData()
    },

    async del (id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async  open (type, id) {
      this.type = type
      if (this.type === 'look') {
        this.dialogShowLook = true
        const obj = { id }
        const res = await detail(obj)
        this.lookForm = { ...res.data }
        this.lookForm.createTime = getNewDate(this.lookForm.createTime)
        if (this.lookForm.creatorID === 2) this.lookForm.creatorID = '超级管理员'
        if (this.lookForm.creatorID === 4) this.lookForm.creatorID = 'demo'
      }
      if (this.type === 'add') {
        this.dialogShow = true
      }
      if (this.type === 'edit') {
        this.dialogShow = true
        this.$refs.editArticle.hanldeEditForm(id)
      }
    },
    goVideo () {
      this.videoShow = true
    },

    clear () {
      this.queryObj.state = null
      this.queryObj.keyword = null
      this.initData()
    },
    searchName () {
      this.initData()
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '新增文章'
      if (this.type === 'edit') return '修改文章'
      if (this.type === 'look') return '预览文章'
      else return 'add'
    },
    renderList () {
      return this.tableData.filter(item => item.subjectName.includes(this.input))
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }

}
 .header{

  margin-bottom: 10px;
  /deep/ .name{
    font-weight: 999;
    color: #626066;
    margin-right:10px ;
  }
  .search{
  width: 200px;
  margin-right: 20px;
 }
 }
  .videoShowMe{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 background: rgba(0, 0, 0, 0.5);
 z-index: 9999;
 }
  .close{
 width: 50px;
 height: 50px;
 position: absolute;
 top: 10%;
 left: 50%;
 transform: translate(-50%);
 background: rgba(0,0,0,.4);
 border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
}
</style>
